revealTransフィルタは、画像や文字を表示させる際にさまざまな効果を加えることができるフィルタです。このフィルタをページ全体に適用させると、円形に拡がって表示されるページなど、さまざまなオープニング効果をもつページを作成できるようになります。今回はrevealTransフィルタをページ全体に適用させる方法を紹介してみましょう。

→
 
ページ全体にrevealTransフィルタを適用させるには、DIVタグを使ってページ全体を一つのブロックにまとめておく必要があります。そして、このブロックにrevealTransフィルタを適用させることにより、ページ全体をrevealTransフィルタの対象とします。なお、フィルタを適用させるDIVタグは、名前を付ける、位置やサイズを指定する、可視性をhiddenにしておく、という3つの設定を行っておかなければいけません。
<BODY bgcolor="#FFFFFF" text="#000000">
<A href="ns.htm">Netscapeの方はこちらをクリック</A>
<DIV id="Layer1" style="position:absolute; left:2%; top:2%; width:96%; height:96%; visibility:hidden; filter:revealTrans">
・
・
（この間にページ内容を記述する）
・
・
</DIV>
</BODY>
なおDIVタグの設定は以下のようになります。
　　・id="Layer1"（名前を「Layer1」に設定）
[以下スタイルシートの設定]
　　・position:absolute（絶対位置とする指定）
　　・left:2%（左余白の設定）
　　・top:2%（上余白の設定）
　　・width:96%（幅の設定）
　　・height:96%（高さの設定）
　　・visibility:hidden（可視性を隠すに設定）
　　・filter:revealTrans（revealTransフィルタの指定）

※revealTransフィルタはInternetExplorerだけが実行できるフィルタとなります。DIVタグの外にNetscapre用ページへのリンクを作成しておくなど、revealTransフィルタに対応していないブラウザを使用している人への対策も忘れないようにしてください。


→
 
ページが切り替わる際に効果をつけるには、ページの読み込みが完了した直後にrevealTransフィルタが実行されるようにしなければいけません。これは、BODYタグに「onload」イベントを追加し、自作のJavaScript関数を呼び出すことにより実現します。
<BODY bgcolor="#FFFFFF" text="#000000" onload="pagestart()">
上記の例では「pagestart()」が自作のJavaScript関数となります。なお関数名は自由に命名して構いません。


→
 
あとはrevealTransフィルタを実行するJavaScript関数を作成すれば作業完了となります。関数の作成では、revealTransフィルタの「種類」と「時間」の設定がポイントとなります。というのも、revealTransフィルタには24種類もの効果が用意されており、Transition属性の値を0〜23の間で変化させるだけで、さまざまな効果を自由に選択できるからです。また効果が終了するまでの時間を変化させるだけでも、ぜんぜん雰囲気が変わってしまいます。
<SCRIPT Language="JavaScript">
function pagestart() {
Layer1.filters[0].Apply();
Layer1.style.visibility = "visible";
Layer1.filters[0].Transition=2;
Layer1.filters[0].duration=3;
Layer1.filters[0].Play();
}
</SCRIPT>
このJavaScript関数はHEADタグ内に記述するようにします。作成した関数について簡単に解説を加えておくと、以下のようになります。

　・functionでpagestart()という名の関数を定義します
　・各コマンドの先頭はDIVタグのオブジェクト名（この例では「Layer1」）を記述します
　・「filters[0].Apply()」で再描画を禁止します
　・「style.visibility = "visible"」でオブジェクトの可視性を表示に変更します
　・「filters[0].Transition=2」では、revealTransフィルタの種類を設定します。ここで設定できる値は0〜23となります
　・「filters[0].duration=3」では、効果が終了するまでの時間を秒数で設定します
　・「filters[0].Play()」でrevealTransフィルタを実行します

ページが完成した後は、Transition、durationの値をいろいろと変化させてみましょう。値によって効果が変化する様子を確認できると思います。

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��